 @charset "gb2312";
 article{
     display: flex;
     justify-content: center;
 }
 article aside {
     width: 30%;
 }
 .page-right{
    width: 68%;
    margin-left: 2%;
 }
/*.l_box { width: 30%; float: left }*/
/*.r_box { width: 68%; float: right }*/
.l_box h2 { color: #333;
    font-size: 1.2rem;
    line-height: 30px;
    padding-left: 20px;
    background: #fff;
    margin-top: 0.5rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.3rem; }
.l_box div {background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 8px #bbb;}
.l_box div ul { padding: 10px; overflow: hidden }
.about_me img { width: 100% }
.about_me p { line-height: 24px; font-size: 14px }
.about_me i { width: 120px; float: left; clear: left; margin-right: 10px; height: 90px; overflow: hidden }
.wdxc li { width: 32%; overflow: hidden; float: left; height: 80px; margin-bottom: 2px; margin-right: 2px }
.wdxc li img { height: 100%; min-height: 80px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.wdxc li img:hover { transform: scale(1.05) }
.fenlei li { margin-bottom: 10px; margin-left: 10px;list-style: square; }
.tuijian li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 0.5rem; background: url(../images/li.png) left center no-repeat; padding-left: 20px;font-size:1rem }
.links a { display: block; float: left; margin: 0 10px 5px 0 }
.guanzhu img { width: 100% }
.navbar-search { display:inline-block; width: 300px}
/*.navbar-search .search { border: 1px solid #229953; background: #229953; border-radius: 0 5px 5px 0; position: relative; }*/
.l_box .search { border: 1px solid #229953; background: #229953; border-radius: 0 5px 5px 0; position: relative; }
article .search input.input_submit { border: 0; background: 0; color: #fff; outline: none; position: absolute; top: 10px; right: 8% }
.navbar-search .search form { display: flex;}
.navbar-search .search input.input_submit { border: 0; color: #fff; outline: none;  top: 10px;background-color: #229953;padding: 0px 16px;}
.search input.input_text { border:1px solid #229953; line-height: 36px; height: 36px; width: 72%; padding-left: 10px; outline: none }
.r_box li { background: rgba(255,255,255,0.8); padding: 15px; overflow: hidden; color: #797b7c; margin-bottom: 20px;overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 8px #bbb;}
.r_box li h3 { font-size: 1.2rem; line-height: 25px; text-shadow: #FFF 1px 1px 1px }
.r_box li h3 a { color: #222 }
.r_box li h3 a:hover { color: #000; text-decoration: underline }
.r_box li img { float: right; clear: right; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.r_box li i { width: 20px; display: inline-block; max-height: 100px; color: #448f16;}
.r_box li p { margin: 20px 0 0 0; line-height: 22px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.r_box li:hover img { transform: scale(1.05) }
.r_box li:hover h3 a { color: #19585d; }
.pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 5px 0; padding-top: 20px }
.pagelist a { color: #666; margin: 0 2px; padding: 5px 10px; }
.pagelist a:hover { color: #19585d; }
.pagelist > b { border: 1px solid #000; padding: 5px 10px; }
.pagelist > li { padding: 5px 10px;background-color: #afd2f5; }
a.curPage { color: #19585d; font-weight: bold; }
/*about*/
.about{ padding: 20px; background: rgba(255,255,255,0.8);line-height: 2rem;
font-size: 1rem;}
.about img{ max-width:500px; margin:20px 0; width:100%}
.cloud ul a { line-height: 24px; height: 24px; display: block; background: #999; float: left; padding: 3px 11px; margin: 10px 10px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; color: #FFF }
.cloud ul a:nth-child(8n-7) { background: #8A9B0F }
.cloud ul a:nth-child(8n-6) { background: #EB6841 }
.cloud ul a:nth-child(8n-5) { background: #3FB8AF }
.cloud ul a:nth-child(8n-4) { background: #FE4365 }
.cloud ul a:nth-child(8n-3) { background: #FC9D9A }
.cloud ul a:nth-child(8n-2) { background: #EDC951 }
.cloud ul a:nth-child(8n-1) { background: #C8C8A9 }
.cloud ul a:nth-child(8n) { background: #83AF9B }
.cloud ul a:first-child { background: #036564 }
.cloud ul a:last-child { background: #3299BB }
.cloud ul a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }
.picbox { width: 100%; overflow: hidden;  }
.picbox ul { overflow: hidden; width: 24%; float: left; margin-right:10px }
.picbox ul li { display: block; background: #FFF; margin: 0 0 20px 0; border: 1px #d9d9d9 solid; }
.picbox ul li i { margin: 10px; height: auto; overflow: hidden; display: block; }
.picbox ul li img { width: 100%; }
.picinfo h3 { border-bottom: #ccc 1px solid; padding: 10px 0; margin: 0 20px; font-size:16px }
.picinfo span { padding:10px 20px; display: block; color: #666; }
.picbox ul li a:hover{ color:#19585d}
.article-time{font-weight: normal;color:#9c9c9c;margin-top: 0.8rem;display: inline-block;}
.category-tags{
    color:#fff;
    font-size: .8rem;
    font-weight: normal;
    background-color: #229953;
    padding:.3rem;
    border:none;
    border-radius: 5px;
    float:right;
    min-width: 4rem;
    text-align: center;
}
.club-box {
    display: flex;
    justify-content: space-between;
}
.club-box .access-btn{
    border: none;
    border-radius: 4px;
    padding: 6px 15px;
    color: #4f4e62;
    background-color: #8fd78fcc;
    font-size: 1rem;
}
.club-box .access-btn:hover{
    cursor: pointer;
}
.form-group label{
    font-size: 1.3rem;
    margin-left: 0.4rem;
}
.submit-access-button{
    text-align: right;
}
.submit-access-button button{
    margin: 1rem;
    padding: 0.4rem 1.5rem;
    font-size: 1.0rem;
}
.submit-access-password{
    height: 1.6rem;
    margin: 0.8rem;
    padding: 0.3rem;
}
.form_box{
    background: rgba(255,255,255,0.8);
    padding: 15px;
    overflow: hidden;
    color: #797b7c;
    margin-left: 1rem;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 8px #bbb;
}
.alert-success.alert-dismissable{
    background-color: #0C9A9A;
}
.alert-danger.alert-dismissable{
    background-color: #d26a3f;
}
.alert-dismissable{
    width: 100%;
    height: 40px;
    display: flex;
    padding: 4px;
    box-sizing: border-box;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    padding-left: 0.7rem;
    color: #fff;
}
.alert-dismissable button{
    width: 20px;
    height: 20px;
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.dropbtn.user-btn{
    background: none;
    color: #0e2231;
}
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.dropdown:hover .dropbtn.user-btn{
    background: none;
    color: #1d70af;
}
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 8px 10px;
    font-size: 14px;
    text-decoration: none;
    display: block;
    line-height: 30px;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}